<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index-bg.css">
    <link rel="stylesheet" href="./css/container.css">
    <link rel="stylesheet" href="./css/animation.css">
    <link rel="stylesheet" href="./css/lunbo.css">
    
</head>

<body>
<!-- 引入的大背景 -->
    <div class="intro">
        <!-- 导航栏------------------------------- -->
        <div class="nav">
           <div class="container">
                <div class="nav-logo">
                    <img src="./img/yunding-logo2.png">
                </div>
                <!-- 登陆后这里就写的是 欢迎xxx -->
                <div class="un-login">
                    <div class="nav-login"><a onclick="login()" style="cursor: pointer;" id="id">登陆/注册</a></div>
                    <div class="nav-login-"><a onclick="out()" style="cursor: pointer;" id="id">注销</a></div>

                    <!-- <div class="nav-login">|</div> -->
                    <!-- <div class="nav-login"><a onclick="register()" style="cursor: pointer;">注册</a></div> -->
                </div>
                <div class="login">
                    <!-- <div>welcome</div> -->
                </div>
                
                <div class="nav-list">
                    <div class="li"><a class="li" href="index.html">首页</a></div>
                    <li class="li">
                        <a class="li my-list" id="my-list" href="#my">我的</a>
                        <ul class="sub" style="display: none;">
                            <li>未读消息</li>
                            <li>已借书籍</li>
                            <li>借阅历史</li>
                        </ul>
                    </li>
                    <li class="li"><a class="li" href="#hot-list">热榜</a></li>
                    <li class="li"><a class="li" href="#book-list">图书展示</a></li>
                    <li class="li"><a class="li" href="#user-message">用户反馈</a></li>
                </div>
            </div>
        </div>

        <div class="container">
        <!-- 搜索框------------------------------------------------>
            <div class="search-box">
                <div class="search-cate">
                    <label for="category">检索分类</label>
                    <select id="category" class="category" >
                        <option value="bookNameSearch">书名</option>
                        <option value="kindSearch">类别</option>
                        <option value="authoSearchr">作者</option>
                    </select>
                </div>
                <!-- 下拉条选择 -->
                <input type="text" class="search-bar" placeholder="输入你想借的书吧！\(￣︶￣*\))" id="search">
                <button class="search-btn" onclick="search()">
                    检索
                    <!-- <img src="./img/search-bar放大镜.png" style="zoom: 20%;"> -->
                </button>
            </div>
        </div>
    </div>

<!-- 淡蓝色背景 --------------------------------------------------------------------------------------------------->
    <div class="bg">
        <div class="container">
            <!-- 我的--------------------------------- -->
            <div class="none" id="my"></div>
            <!-- 这个none是用来调正锚点的！！！ -->

            <div class="my">
                <div class="header">
                    <img class="head-logo-" src="./img/head-logo/my.png">
                    <div class="big-h">我的</div>
                </div>

                <!-- 未读消息 -->
                <div class="my-messgage" style="padding-top: 10px;">
                    <header class="my-messgage-header">
                        <div class="middle-h">未读消息</div>
                    </header>
                    <div class="my-messgage-main">
                        <div id="mes">

                        </div>
                        <!-- <div class="piece-mes">
                            <li class="piece-mes-main">管理员已处理审批《111》，请于x日去xx拿书。</li>
                            <button class="btn-read">R</button>
                        </div>
                        <div class="piece-mes">
                            <li class="piece-mes-main">管理员已处理审批《222》，请于x日去xx拿书。</li>
                            <button class="btn-read" onclick="read()">R</button>
                        </div>        -->
                    </div>
                </div>

                <!-- 已借书籍 -->
                <div class="my-bookshelf">
                    <header class="my-bookshelf-header">
                        <div class="middle-h" style="margin-top: 20px;">已借书籍</div>
                    </header>
                    <div class="my-bookshelf-main">
                        <!-- 后端！！！--------------------------------------------------------------- -->
                        <div class="book-block">
                            <div class="book">
                                <div class="book-b-img"><img src="./img/gs.jfif" style="zoom: 0.5;"></div>
                                <div class="book-b-message"></div>
                            </div>
                            <div class="btn-huan-box"><button class="btn-huan" onclick="huan()">还书</button></div>
                        </div>
                        <div class="book-block">
                            <div class="book">
                                <div class="book-b-img"><img src="./img/gs.jfif" style="zoom: 0.5;"></div>
                                <div class="book-b-message"></div>
                            </div>
                            <div class="btn-huan-box"><button class="btn-huan" onclick="huan()">还书</button></div>
                        </div>
                    </div>
                    
                </div>

                <!-- 借阅历史 -->
                <div class="my-history">
                    <header class="my-history-header">
                        <img src="">
                        <div class="middle-h" style="margin-top: 20px;">借阅历史</div>
                    </header>
                    <div class="my-history-main">
                        <!-- 后端！！！------------------------------------------------------------ -->
                        <li id="history">
                            <!-- <div id="username" style="display: inline;"></div> 从<div id="borrow_date" style="display: inline;"></div>到<div id="return_time" style="display: inline;"></div>借了<div id="bookname" style="display: inline;"></div>。 -->
                        </li>
                    </div>
                </div>
            </div>
    
            <!-- 热榜--------------------------------- -->
            <div class="none" id="hot-list"></div>

            <div class="hot-list" id="hot-list">
                <div class="header">
                    <div class="head-logo"><img src="./img/head-logo/热榜1.png"></div>
                    <div class="big-h">热榜</div>
                </div>
                <div class="hot-main">
                    <div class="hot-shell">
                        <ul class="hot-imgs">
                            <li class="hot-img"></li>
                            <li class="hot-img"></li>
                            <li class="hot-img"></li>
                            <li class="hot-img"></li>
                        </ul>
                        <ul class="min-imgs">
                            <li class="min"></li>
                            <li class="min"></li>
                            <li class="min"></li>
                            <li class="min"></li>
                        </ul>
                        <div class="button">
                            <div class="button-left"><</div>
                            <div class="button-right">></div>
                        </div>
                    </div>
                </div>
            </div>
    
            <!-- 图书库------------------------------- -->
            <div class="none" id="book-list"></div>

            <div class="book-list" id="book-list">
                <div class="header">
                    <div class="head-logo"><img src="./img/head-logo/图书库1.png"></div>
                    <div class="big-h">图书展示</div>
                    <div class="book-more" onclick="allbook()"><img src="./img/head-logo/more.png"></div>
                    <div style="float: right;margin-top: 10px; margin-right: 6px;" class="middle-h">查看更多</div>
                </div>

                <div class="book-box">
                    <div class="book">
                        <div class="pic"><img src="./img/gs.jfif"style="zoom: 0.5;"></div>
                        <div class="content">高等数学</div>
                    </div>
                    <div class="book">
                        <div class="pic"><img src="./img/gs.jfif" style="zoom: 0.5;"></div>
                        <div class="content">高等数学</div>
                    </div>
                </div>
            </div>
    
            <!-- 反馈--------------------------------- -->
            <div class="none" id="user-message"></div>

            <div class="user-message" id="user-message">
                <div class="header">
                    <div class="head-logo"><img src="./img/放大镜.png"></div>
                    <div class="big-h">用户反馈</div>
                </div>
                <div class="user-main">
                    <input type="text" class="user-input" placeholder="你的建议对我们很宝贵(๑•̀ㅂ•́)و✧">
                </div>
                <p>
                    <button onclick="alert('您的建议我们收到了！！')" class="user-btn">提交</button>
                </p>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="footer-item">
                <span>联系电话:0106868088</span> 
                <ul>
                   <li><a href="https://www.yunliyunwai.cn/">云顶书院官网</a></li>
                   <li><a href="">关于我们</a></li>
                   <li><a href="">联系我们</a></li>
                   <li><a href="">版权声明</a></li>
                   <li><a href="">投诉举报</a></li>
                </ul>
             </div>
             <div class="footer-item">
                <span>官方邮箱:0s_beyond_clouds@163.com</span> 
                <ul>
                   <li><a href="">代码托管平台</a></li>
                   <li><a href="">加入我们</a></li>
                   <li><a href="">商务合作</a></li>
                   <li><a href="">用户协议</a></li>
                   <li><a href="">意见反馈</a></li>
                </ul>
             </div>
             <div class="footer-item">
                <span>Copyright ◎2019云开源社区All Rights Reserved · 晋ICP备 18010660号-2    </span> 
                <ul>
                   <li><a href="">营业执照</a></li>
                   <li><a href="">网络文化经营许可证</a></li>
                </ul>
             </div>
        </div>
     </footer>
     <button class="toTop" style="zoom: 2;"></button>
    
</body>

<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/index.js"></script>
</html>